<template>
  <div class="el"
    :style="{
      flexDirection: id !== 2 && id !== 3? 'row' : 'row-reverse',
    }"
  >
    <div class="ls news-element">
      <img :src="img" alt="">
    </div>
    <div class="ls news-element-content">
      <div>
        <span>
        <b class="time">{{ time }}</b>
        <b class="more">MORE</b>
      </span>
      <h3>{{ title }}</h3>
      <p>{{ content }}</p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">

  defineProps<{
    id: number
    time: string
    img: string
    title: string
    content: string
  }>()



</script>
<style scoped>

  .float-left {
    float: left;
  }

  .el {
    display: flex;
    overflow: hidden;

    .ls {
      flex: 1 0 0;
      width: 50%;
      height: 100%;
    }

    .news-element {
      >img {
        width: 100%;

      }
    }

    .news-element-content {

      > div {
        padding: 15px;
      }

      span {
        font-size: 14px;
        .time {
          color: #733;
        }

        .more {
          float: right;
          color: #733;

        }
      }

      h3 {
        margin: 10px 0;
        max-width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: normal;
      }

      p {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        opacity: 0.6;
      }
    }
  }



</style>
